<template>
  <div class="wrapBox" :style="' height:' + height">
    <div class="ctrls">
      <el-form
        label-position="right"
        :inline="true"
        class="clearfix"
        ref="queryForm"
        size="small"
        :model="queryParams"
        @submit.native.prevent
      >
        <el-form-item label="年份" style="margin-bottom: 0px">
          <el-date-picker v-model="time" value-format="yyyy" type="year" placeholder="请选择年份"> </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="时间单位" style="margin-bottom: 0px">
          <el-select v-model="queryParams.queryByDateType" style="width: 120px" placeholder="请选择时间单位">
            <el-option v-for="item in queryByDateType" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item style="margin-bottom: 0px">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="general">
      <div>
        <div class="label"><span class="mx-1">市场研究</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpSearch'] }}</span
          ><span>元</span>
        </div>
      </div>
      <div>
        <div class="label"><span class="mx-1">营销宣传</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpPublicity'] }}</span
          ><span>元</span>
        </div>
      </div>
      <div>
        <div class="label"><span class="mx-1">销售渠道</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpChannel'] }}</span
          ><span>元</span>
        </div>
      </div>
      <div>
        <div class="label"><span class="mx-1">产品开发改进</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpProductDevelopment'] }}</span
          ><span>元</span>
        </div>
      </div>
      <div>
        <div class="label"><span class="mx-1">市场拓展团队</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpTeams'] }}</span
          ><span>元</span>
        </div>
      </div>
      <div>
        <div class="label"><span class="mx-1">合作与联盟</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpPartnering'] }}</span
          ><span>元</span>
        </div>
      </div>
      <div>
        <div class="label"><span class="mx-1">品牌建设推广</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpBrandBuilding'] }}</span
          ><span>元</span>
        </div>
      </div>
      <div>
        <div class="label"><span class="mx-1">客户关系维护</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpCustomerRelationshipService'] }}</span
          ><span>元</span>
        </div>
      </div>
      <div>
        <div class="label"><span class="mx-1">其他</span></div>
        <div class="number">
          <span>{{ baseInfo['mktExpOthers'] }}</span
          ><span>元</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="chartA" style="height: 99%; width: 100%">
        <div ref="expenditureStatistics" v-loading="loading" style="height: 100%; width: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { analysisMarket } from '@/api/biz/index'
import dayjs from 'dayjs'
import { echartsNullData, filterAnalysisData } from '@/utils/index'
export default {
  name: 'ProjectSummary',
  data() {
    return {
      height: document.documentElement.clientHeight - 94.5 - 140 + 'px;',
      baseInfo: {},
      loading: false,
      queryParams: {
        queryByDateType: 'month',
        queryType: '3',
        years: [],
      },
      queryByDateType: [
        {
          label: '月',
          value: 'month',
        },
        {
          label: '年',
          value: 'year',
        },
      ],
      color: ['#3692fd', '#f59063', '#49efcd', '#facf6a', '#fb627d', '#7cc934', '#b22c2a'],
      time: '',
    }
  },
  watch: {
    time: {
      handler(val) {
        this.queryParams.years = [val]
      },
    },
  },
  mounted() {
    this.time = dayjs().format('YYYY')
    this.$nextTick(() => {
      this.initData()
    })
  },
  methods: {
    initData() {
      this.loading = true
      analysisMarket(this.queryParams)
        .then((res) => {
          this.baseInfo = res.data.marketExpansionAnalysis
          this.expenditureStatistics(res.data.marketExpansionAnalysis)
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    expenditureStatistics(data = []) {
      const chart = echarts.init(this.$refs.expenditureStatistics)
      const labelOption = {
        show: true,
        verticalAlign: 'middle',
        position: 'top',
        color: 'inherit',
        formatter: (obj) => `${obj.value != 0 ? obj.value + '元' : ''}`,
      }
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.3)',
        },
      }
      const classify = ['市场研究', '营销和宣传', '销售渠道', '产品开发改进', '合作与联盟', '营销和宣传']
      let xLabel = []
      let yValue = []
      let filterData = []
      const seriesList = []
      const config = {
        title: {
          text: '支出统计',
          textStyle: {
            color: '#606266',
            fontSize: 14,
            fontWeight: 'normal',
          },
          top: 10,
          left: 10,
        },
        color: ['#3692fd', '#facf6a', '#fb627d'],
        legend: {
          left: 'center',
          top: 40,
        },
        xAxis: {
          data: [],
          name: '',
          splitLine: { show: false },
          splitArea: { show: false },
          type: 'category',
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            onZero: true,
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLine: { onZero: false },
          },
        ],
        grid: {
          top: 80,
          bottom: 40,
        },
        tooltip: {
          trigger: 'axis',
          valueFormatter: (value) => `${value}元`,
        },
        series: [],
      }
      if (this.queryParams.queryByDateType == 'month') {
        const currentData = data.children[0].children
        for (let i = 0; i < classify.length; i++) {
          yValue.push([])
        }
        currentData.map((item) => {
          xLabel.push(`${item.dateStrCN}`)
          yValue[0].push(item.mktExpSearch)
          yValue[1].push(item.mktExpPublicity)
          yValue[2].push(item.mktExpChannel)
          yValue[3].push(item.mktExpProductDevelopment)
          yValue[4].push(item.mktExpPartnering)
          yValue[5].push(item.mktExpPublicity)
        })
        filterData = filterAnalysisData({ xLabel, yValue })
        filterData.yValue.map((item, index) => {
          seriesList.push({
            name: classify[index],
            type: 'line',
            emphasis: emphasisStyle,
            barMaxWidth: 40,
            data: item,
            label: labelOption,
          })
        })
        config.legend.data = classify
        config.series = seriesList
        config.xAxis.data = filterData.xLabel
      } else {
        const currentData = data.children
        for (let i = 0; i < classify.length; i++) {
          yValue.push([])
          seriesList.push({
            name: classify[i],
            type: 'bar',
            emphasis: emphasisStyle,
            barMaxWidth: 70,
            data: yValue[i],
            label: {
              show: true,
              verticalAlign: 'middle',
              position: 'top',
              color: 'inherit',
              formatter: (obj) => `${obj.value != 0 ? obj.value + '元' : ''}`,
            },
          })
        }
        let total = 0
        for (let i = 0; i < currentData.length; i++) {
          const item = currentData[i]
          xLabel.push(`${item.dateStr}年`)
          yValue[0].push(item.mktExpSearch)
          yValue[1].push(item.mktExpPublicity)
          yValue[2].push(item.mktExpChannel)
          yValue[3].push(item.mktExpProductDevelopment)
          yValue[4].push(item.mktExpPartnering)
          yValue[5].push(item.mktExpPublicity)
          total +=
            item.mktExpSearch * 1 +
            item.mktExpPublicity * 1 +
            item.mktExpChannel * 1 +
            item.mktExpProductDevelopment * +item.mktExpPublicity * 1
        }
        if (total === 0) {
          filterData.xLabel = []
          filterData.yValue = []
        } else {
          filterData.xLabel = xLabel
          filterData.yValue = yValue
        }

        config.legend.data = classify
        config.series = seriesList
        config.xAxis.data = filterData.xLabel
      }
      if (!filterData.isNull) {
        chart.setOption(config)
      } else {
        echartsNullData(this.$refs.expenditureStatistics, echarts, '支出统计', this)
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      echarts.dispose(this.$refs.expenditureStatistics)
      this.initData()
    },
    /** 重置按钮操作 */
    resetQuery() {
      echarts.dispose(this.$refs.expenditureStatistics)
      this.time = dayjs().format('YYYY')
      this.$nextTick(() => {
        this.initData()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.wrapBox {
  font-family: Inter, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \5fae\8f6f\96c5\9ed1,
    Arial, sans-serif;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ctrls {
  width: 100%;
  height: 60px;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}
.general {
  width: 100%;
  display: flex;
  flex-direction: row;
  // justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
  flex-shrink: 0;
  > div {
    width: 18.4%;
    margin-left: 10px;
    margin-bottom: 10px;
    height: 106.67px;
    background: #fff;
    display: flex;
    flex-direction: column;

    align-items: center;
    padding: 10px 15px 5px 15px;
    box-sizing: border-box;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    > .label {
      width: 100%;
      text-align: left;
      font-size: 14px;
      font-weight: 500;
    }
    .number {
      font-size: 24px;
      height: 28px;
      font-weight: 600;
      margin: auto 0;
      line-height: 1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      > span {
        line-height: 1;
      }
      > span:nth-child(2) {
        display: block;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;
        margin-left: 4px;
        color: #635f5f;
      }
    }
  }
}
.content {
  flex: 1;
  .chartA {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    > div {
      width: 100%;
    }
  }
}
</style>
